<html>
<body>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="container">

<div>
  <a id="link1" href="#">Link</a>
  <button id="button1">Button</button>
  <input id="text1" type="text">
  <input id="checkbox1" type="checkbox">
  <input id="radio1" type="radio">
  <input id="slider1" type="range">
  <input id="submit1" type="submit">
  <select id="combobox1"><option>1<option>2</select>
  <select id="listbox1" multiple><option>1<option>2</select>
  <textarea id="textarea1"></textarea>
  <div id="focusable1" tabindex="0">Focusable</div>
</div>

<canvas id="myCanvas" width="300" height="300">
  <a id="link2" href="#">Link</a>
  <button id="button2">Button</button>
  <input id="text2" type="text">
  <input id="checkbox2" type="checkbox">
  <input id="radio2" type="radio">
  <input id="slider2" type="range">
  <input id="submit2" type="submit">
  <select id="combobox2"><option>1<option>2</select>
  <select id="listbox2" multiple><option>1<option>2</select>
  <textarea id="textarea2"></textarea>
  <div id="focusable2" tabindex="0">Focusable</div>
</canvas>

<canvas hidden id="hiddenCanvas" width="300" height="300">
  <a id="linkInHiddenCanvas" href="#">Link</a>
</canvas>

</div>
<script>
var element;
var previousFocusedElement;

function checkFocusable(id) {
    element = document.getElementById(id);
    element.focus();
    assert_equals(document.activeElement, element);
}

function checkNotFocusable(id) {
    previousFocusedElement = document.activeElement;
    element = document.getElementById(id);
    element.focus();
    assert_equals(document.activeElement, previousFocusedElement);
}

var focusableTestScenarios = [
    ['FocusableTestCase1', "link1"],
    ['FocusableTestCase2', "button1"],
    ['FocusableTestCase3', "text1"],
    ['FocusableTestCase4', "checkbox1"],
    ['FocusableTestCase5', "radio1"],
    ['FocusableTestCase6', "slider1"],
    ['FocusableTestCase7', "submit1"],
    ['FocusableTestCase8', "combobox1"],
    ['FocusableTestCase9', "listbox1"],
    ['FocusableTestCase10', "textarea1"],
    ['FocusableTestCase11', "focusable1"],

    ['FocusableTestCase12', "link2"],
    ['FocusableTestCase13', "button2"],
    ['FocusableTestCase14', "text2"],
    ['FocusableTestCase15', "checkbox2"],
    ['FocusableTestCase16', "radio2"],
    ['FocusableTestCase17', "slider2"],
    ['FocusableTestCase18', "submit2"],
    ['FocusableTestCase19', "combobox2"],
    ['FocusableTestCase20', "listbox2"],
    ['FocusableTestCase21', "textarea2"],
    ['FocusableTestCase22', "focusable2"]
];

var notFocusableTestScenarios = [
    ['NotFocusableTestCase', "linkInHiddenCanvas"],
];

generate_tests(checkFocusable, focusableTestScenarios);
generate_tests(checkNotFocusable, notFocusableTestScenarios);
document.querySelector("#container").remove();

</script>
</body>
</html>
